import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Loading from './components/Loading';
const Login = lazy(() => import('@/pages/Login'));
const Home = lazy(() => import('@/pages/Home'));
const Layout = lazy(() => import('@/pages/Layout'));
const NotFound = lazy(() => import('@/pages/NotFound'));
const QA = lazy(() => import('@/pages/QA'));
const Video = lazy(() => import('@/pages/Video'));
const Profile = lazy(() => import('@/pages/Profile'));
const ProfileEdit = lazy(() => import('@/pages/Profile/Edit'));
const ProfileChat = lazy(() => import('@/pages/Profile/Chat'));

function App() {
  return (
    <>
      <Router>
        <Suspense fallback={<Loading />}>
          <Routes>
            <Route path="/" element={<Navigate to="/layout/home" />} />
            <Route path="/layout" element={<Layout />}>
              <Route path="home" element={<Home />} />
              <Route path="qa" element={<QA />} />
              <Route path="video" element={<Video />} />
              <Route path="profile" element={<Profile />} />
            </Route>
            <Route path="/layout" element={<Layout />} />
            <Route path="/login" element={<Login />} />
            <Route path="/profile/edit" element={<ProfileEdit />} />
            <Route path="/profile/chat" element={<ProfileChat />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Suspense>
      </Router>
    </>
  );
}

export default App;
